<%--
  Created by IntelliJ IDEA.
  User: SXT
  Date: 2020/6/30
  Time: 9:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理页面</title>
    <base href="<%=request.getContextPath()+"/"%>">
    <%--引入easyui主题的css样式--%>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <%--引入easyui中图标集的css样式--%>
    <link rel="stylesheet" href="easyui/themes/icon.css">
    <%--引入demo.css--%>
    <link rel="stylesheet" href="easyui/themes/demo.css">
    <%--引入jq中js文件  注意：先引入jq中js在引入easyui中js--%>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <%--引入easyui中核心js文件--%>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">

          $(function () {
              $('#dg').datagrid({
                  url:'role/findAllRole',
                  pagination:true,//设置分页栏展示
                  rownumbers:true,//设置行号显示
                  pageSize:5,//设置size的初始大小
                  pageList:[5,10,15,20],// 设置每一页显示条数列表
                  toolbar:"#tb",
                  columns:[[
                      {field:'rid',title:'角色编号',width:100,align:'center'},
                      {field:'rname',title:'角色名称',width:100,align:'center'},
                      {field:'rdesc',title:'角色描述',width:300,align:'center'}

                  ]]
              });
          })

          var url="";
          //添加角色的实现
          function newRole() {
              //打开添加角色的对话框
              $("#dlg").dialog("open").dialog("setTitle","NEW Role");
              //清空表单内容
              $("#fm").form("clear");
              //清空树形实现
              treeClear();
              url="role/saveRole";
          }

          //提交表单实现
         function saveRole() {
              //获得所有被勾选和半勾选的值
             var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']);
             console.log(nodes);
             var  mids="";
             for(var i  in  nodes){
                 if(mids!="")mids+=",";
                 mids+=nodes[i].id;
             }
             console.log(mids);

             //发送ajax请求进行角色的添加  rname=ss&rdesc=88
             $.post(url,$("#fm").serialize()+"&mids="+mids,function (result) {
                   if(result>0){
                       //关闭当前对话框
                        $("#dlg").dialog("close");
                       //重新加载数据网格
                       $("#dg").datagrid("reload");
                   }

             })
         }

         //清空树形实现
         function treeClear() {
              //获得所有的勾选的节点
             var nodes = $('#tt').tree('getChecked');
             for(var i  in  nodes){
                 //取消选中复选框
                 $('#tt').tree('uncheck', nodes[i].target);
             }
         }
         
         //修改对话框打开
         function editRole() {
            var  row=  $("#dg").datagrid("getSelected");
             console.log(row);
            if(row){

                //打开修改对话框
                $("#dlg").dialog("open").dialog("setTitle","Edit Role");
                //进行数据回显
                $("#fm").form("load",row);

                //清空之前复选框
                treeClear();

                $.post("role/findMoreRM",{rid:row.rid},function (result) {
                       for(var i in result){
                           //勾选树形实现
                           var node = $('#tt').tree('find', result[i]);
                           $('#tt').tree('check', node.target);
                       }

                })
                url="role/changeRole?rid="+row.rid;
            }
             
         }

    </script>
</head>
<body>


<div style="width: 800px;height: 600px" class="easyui-panel" title="角色管理">
    <div style="width: 750px;height: 400px;border: 0px solid red;margin: 0px auto;margin-top: 30px">

        <table id="dg" style="width: 750px;height: 400px"></table>

        <%--工具栏设置--%>
        <div id="tb">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newRole()">添加角色</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editRole()">编辑角色</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeRole()">删除角色</a>

        </div>
    </div>
</div>

<%--添加角色的对话框--%>
<div id="dlg" class="easyui-dialog" style="width:400px;height: 700px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
        <h3>Role Information</h3>
        <div style="margin-bottom:10px">
            <input name="rname" class="easyui-textbox" required="true" label="角色名称:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="rdesc" class="easyui-textbox" required="true" label="角色描述:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            菜单选择：
            <ul id="tt" class="easyui-tree" data-options="url:'menu/findAllMenu3',method:'get',animate:true,checkbox:true"></ul>
        </div>

    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveRole()" style="width:90px">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>

</body>
</html>
